.order-container-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  flex-flow: column;

  .cart-container {
    width: 100%;
    height: 100rpx;
    box-sizing: border-box;
    background: #F6F6F6;
    display: flex;
    align-items: center;

    .btn-wrap {
      flex: 1;
      display: flex;
      justify-content: flex-end;

      .btn {
        width: 220rpx;
        height: 100rpx;
        color: #ffffff;
        background-color: #C5996A;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }

    .total-amount {
      margin-left: 48rpx;
      display: flex;
      align-items: flex-end;
      line-height: 1;

      .label {
        font-size: 24rpx;
      }

      .price {
        font-size: 42rpx;
        font-weight: 600;
        transform: translateY(2rpx);
        color: #C5996A;
      }

    }

    .card-icon {
      width: 100rpx;
      height: 100rpx;
      position: relative;
      border-radius: 50%;
      margin: 0 0 20rpx 30rpx;
      background-color: #ffffff;
      box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
      display: flex;
      align-items: center;
      justify-content: center;

      .icon {
        width: 48rpx;
        height: 48rpx;
      }

      .tip {
        top: 0;
        right: 0;
        width: 36rpx;
        height: 36rpx;
        color: #ffffff;
        line-height: 36rpx;
        text-align: center;
        border-radius: 50%;
        position: absolute;
        background-color: #C5996A;
        font-size: 24rpx;
      }
    }
  }

  .content-body {
    --category-width: 180rpx;
    --category-height: 108rpx;

    .category-wrapper {
      width: var(--category-width);
      height: 100%;
      background-color: #F5F5F5;
      box-sizing: border-box;
      position: absolute;
      left: 0;
      top: 0;

      .category-item {
        box-sizing: border-box;
        width: 100%;
        height: var(--category-height);
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-left: 18rpx;

        &.active {
          background-color: #FFFFFF;

          &::before {
            background-color: #C5996A;
          }
        }

        &::before {
          content: "";
          display: block;
          width: 3px;
          background: #F5F5F5;
          position: absolute;
          left: 0;
          top: 0;
          bottom: 0;
        }

        .category-title {
          height: 44rpx;
          font-size: 28rpx;
          font-weight: 400;
          color: rgba(0, 0, 0, 0.6);
          line-height: 44rpx;
        }
      }
    }

    .shop-wrapper {
      position: absolute;
      right: 0;
      top: 0;
      left: calc(var(--category-width) + 36rpx);
      bottom: 0;

      .shop-group {
        font-size: 0;
        box-sizing: border-box;

        .shop-item {
          display: flex;
          padding-right: 32rpx;
          box-sizing: border-box;
          position: relative;
          margin-bottom: 32rpx;
          flex-flow: row;

          .shop-info {
            display: flex;
            flex-flow: column;
            margin-left: 22rpx;
            flex: 1;

            .name {
              height: 40rpx;
              font-size: 24rpx;
              font-weight: 500;
              color: #1D2129;
              line-height: 40rpx;
            }

            .number {
              height: 32rpx;
              font-size: 20rpx;
              font-weight: 400;
              color: #86909C;
              line-height: 32rpx;
              margin-top: 16rpx;
            }


          }

          .add-btn {
            width: 100%;
            float: 1;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 16rpx;

            .price {
              height: 48rpx;
              font-size: 32rpx;
              font-weight: 500;
              color: #C5996A;
              line-height: 48rpx;
            }

            //.num {
            //  font-size: 28rpx;
            //  margin: 0 16rpx;
            //}
            //
            //.btn {
            //  width: 43rpx;
            //  height: 43rpx;
            //  overflow: hidden;
            //  display: flex;
            //  align-items: center;
            //  justify-content: center;
            //  //background-color: #C5996A;
            //
            //  .add-icon {
            //    width: 38rpx;
            //    height: 38rpx;
            //  }
            //}
            .right-btn {
              flex: 1;
              display: flex;
              align-items: center;
              justify-content: flex-end;

              .buy-btn {
                padding: 8rpx 20rpx;
                position: relative;
                box-sizing: border-box;
                border-radius: 24rpx;
                background: #C5996A;
                color: #fff;
                font-size: 24rpx;

                .tag-num {
                  color: #ffffff;
                  position: absolute;
                  top: -20rpx;
                  right: -20rpx;
                  width: 40rpx;
                  height: 40rpx;
                  font-size: 20rpx;
                  border-radius: 50%;
                  border: 1rpx solid #ffffff;
                  background-color: #C5996A;
                  display: flex;
                  flex-direction: row;
                  align-items: center;
                  justify-content: center;
                }
              }

              .number-box {
                position: relative;
                display: flex;
                align-items: center;
                flex-flow: row nowrap;
                line-height: 1;

                .number-value {
                  width: 60rpx;
                  color: #222222;
                  font-size: 30rpx;
                  text-align: center;

                  position: relative;
                  left: 50rpx;
                  opacity: 0;
                  -webkit-transform: rotate(0deg);
                  transform: rotate(0deg);
                  transition: all .1s linear;
                  z-index: -1;
                }

                .decrement-icon {
                  position: relative;
                  left: 100rpx;
                  opacity: 0;
                  -webkit-transform: rotate(0deg);
                  transform: rotate(0deg);
                  transition: all .1s linear;
                  z-index: -1;
                }

                .action-btn {
                  width: 44rpx;
                  height: 44rpx;

                  image {
                    width: 100%;
                    height: 100%;
                  }
                }

                &.active {
                  .number-value {
                    transform: rotate(-360deg);
                    left: 0;
                    opacity: 1;
                    z-index: 1;
                  }

                  .decrement-icon {
                    transform: rotate(-360deg);
                    left: 0;
                    opacity: 1;
                    z-index: 1;
                  }
                }
              }
            }
          }

          .shop-image {
            width: 152rpx;
            height: 152rpx;
            border-radius: 8rpx;
          }
        }
      }

    }
  }

  .search-wrap {
    width: 100%;
    box-sizing: border-box;
    padding: 16rpx 32rpx;
    display: flex;
    align-items: center;

    .search-btn {
      padding: 8rpx 38rpx;
      font-size: 28rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: 16rpx;
      border: 1px solid #C5996A;
      border-radius: 32rpx;
    }

    .search-inner {
      flex: 1;
      width: 100%;
      background: #F7F8FA;
      border-radius: 74rpx;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      padding: 10rpx 32rpx;

      .search-icon {
        width: 40rpx;
        height: 40rpx;
      }

      .search-input {
        flex: 1;
        height: 44rpx;
        font-size: 28rpx;
        font-weight: 400;
        color: #86909C;
        line-height: 44rpx;
        margin-left: 8rpx;
      }
    }
  }

  .banner-wrapper {
    width: 100%;
    height: 200rpx;
    box-sizing: border-box;
    position: relative;
  }

  .chose-room {
    padding: 4rpx 32rpx;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .right-btn {
      font-size: 32rpx;
      color: #C5996A;
      font-weight: bold;
    }

    .right {
      display: flex;
      align-items: center;

      .confirm {
        font-size: 28rpx;
        color: #7E511A;
      }
    }

    .left {
      display: flex;
      align-items: center;
    }

    .chevron {
      width: 32rpx;
      height: 32rpx;
      margin-left: 10rpx;
    }

    .label-text {
      height: 48rpx;
      font-size: 32rpx;
      font-weight: 500;
      color: #1D2129;
      line-height: 48rpx;
    }
  }

  .navbar-wrap {
    width: 100%;
    position: relative;
    height: 176rpx;
    background-color: #F2EDDC;
    display: flex;
    flex-flow: column;
    justify-content: flex-end;
    align-items: center;

    .nav-title {
      font-size: 36rpx;
      font-weight: 500;
      color: #000000;
      padding: 20rpx 0;
    }

    .mask {
      width: 50%;
      height: 100%;
      position: absolute;
      top: 0;

      &.left {
        left: 0;
      }

      &.right {
        right: 0;
      }

    }
  }
}
